<template>
	<view class="container">
		<!-- 考试信息卡片 -->
		<view class="exam-info-card">
			<text class="exam-title">2024-2025年上学期九年级3月第三次模考</text>
			<text class="exam-date">考试时间：2025/03/03</text>
		</view>

		<!-- 科目列表 -->
		<view class="subject-list">
			<!-- 物理科目 -->
			<view class="subject-item">
				<view class="subject-content">
					<!-- 左侧：图标和状态 -->
					<view class="subject-icon-wrapper">
						<view class="subject-icon orange">
							<text class="icon-text">⚡</text>
						</view>
						<text class="publish-status unpublished">未发布</text>
					</view>
					
					<!-- 右侧：科目信息和按钮 -->
					<view class="subject-info">
						<!-- 头部：科目名称和按钮 -->
						<view class="subject-header">
							<text class="subject-name">物理</text>
							<button class="publish-btn disabled" @click="publishSubject('物理')">立即发布</button>
						</view>
						
						<!-- 详细信息 -->
						<view class="subject-details">
							<view class="subject-stats">
								<text class="stat-text">报考总数：159</text>
								<text class="stat-text">实扫总数：0</text>
							</view>
							<view class="subject-tasks">
								<text class="task-text">未评完任务：50</text>
								<view class="participation-toggle">
									<text class="toggle-label">缺考参与统计：</text>
									<switch class="toggle-switch" :checked="physicsParticipation" @change="togglePhysicsParticipation" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 地理科目 -->
			<view class="subject-item">
				<view class="subject-content">
					<!-- 左侧：图标和状态 -->
					<view class="subject-icon-wrapper">
						<view class="subject-icon orange">
							<text class="icon-text">🌍</text>
						</view>
						<text class="publish-status unpublished">未发布</text>
					</view>
					
					<!-- 右侧：科目信息和按钮 -->
					<view class="subject-info">
						<!-- 头部：科目名称和按钮 -->
						<view class="subject-header">
							<text class="subject-name">地理</text>
							<button class="publish-btn enabled" @click="publishSubject('地理')">立即发布</button>
						</view>
						
						<!-- 详细信息 -->
						<view class="subject-details">
							<view class="subject-stats">
								<text class="stat-text">报考总数：159</text>
								<text class="stat-text">实扫总数：4</text>
							</view>
							<view class="subject-tasks">
								<text class="task-text">未评完任务：0</text>
								<view class="participation-toggle">
									<text class="toggle-label">缺考参与统计：</text>
									<switch class="toggle-switch" :checked="geographyParticipation" @change="toggleGeographyParticipation" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 生物科目 -->
			<view class="subject-item">
				<view class="subject-content">
					<!-- 左侧：图标和状态 -->
					<view class="subject-icon-wrapper">
						<view class="subject-icon blue">
							<text class="icon-text">🧬</text>
						</view>
						<text class="publish-status published">已发布</text>
					</view>
					
					<!-- 右侧：科目信息和按钮 -->
					<view class="subject-info">
						<!-- 头部：科目名称和按钮 -->
						<view class="subject-header">
							<text class="subject-name">生物</text>
							<button class="publish-btn republish" @click="republishSubject('生物')">重新发布</button>
						</view>
						
						<!-- 详细信息 -->
						<view class="subject-details">
							<view class="subject-stats">
								<text class="stat-text">报考总数：159</text>
								<text class="stat-text">实扫总数：4</text>
							</view>
							<view class="subject-tasks">
								<text class="task-text">未评完任务：0</text>
								<view class="participation-toggle">
									<text class="toggle-label">缺考参与统计：</text>
									<switch class="toggle-switch" :checked="biologyParticipation" @change="toggleBiologyParticipation" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部一键发布按钮 -->
		<view class="bottom-action">
			<button class="batch-publish-btn" @click="batchPublish">一键发布</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			examTitle: '2024-2025年上学期九年级3月第三次模考',
			examDate: '2025/03/03',
			physicsParticipation: true,
			geographyParticipation: false,
			biologyParticipation: false
		}
	},
	onLoad() {
		
	},
	methods: {
		// 切换物理科目缺考参与统计
		togglePhysicsParticipation(e) {
			this.physicsParticipation = e.detail.value;
		},
		// 切换地理科目缺考参与统计
		toggleGeographyParticipation(e) {
			this.geographyParticipation = e.detail.value;
		},
		// 切换生物科目缺考参与统计
		toggleBiologyParticipation(e) {
			this.biologyParticipation = e.detail.value;
		},
		// 发布科目
		publishSubject(subject) {
			console.log('发布科目:', subject);
			uni.showToast({
				title: `${subject}发布成功`,
				icon: 'success'
			});
		},
		// 重新发布科目
		republishSubject(subject) {
			console.log('重新发布科目:', subject);
			uni.showToast({
				title: `${subject}重新发布成功`,
				icon: 'success'
			});
		},
		// 一键发布
		batchPublish() {
			console.log('一键发布所有科目');
			uni.showToast({
				title: '一键发布成功',
				icon: 'success'
			});
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@text-lighter: #999;
@white: #fff;
@border-color: #F0F0F0;

.container {
	min-height: 100vh;
	background: linear-gradient(135deg, @primary-color 0%, @secondary-color 100%);
	padding: 20rpx;
	padding-bottom: 120rpx;
}

// 考试信息卡片
.exam-info-card {
	background: @white;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);

	.exam-title {
		font-size: 32rpx;
		font-weight: bold;
		color: @text-color;
		line-height: 1.4;
		display: block;
		margin-bottom: 8rpx;
	}

	.exam-date {
		font-size: 24rpx;
		color: @text-light;
		display: block;
	}
}

// 科目列表
.subject-list {
	.subject-item {
		background: @white;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 16rpx;
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);

		.subject-content {
			display: flex;
			align-items: flex-start;
			gap: 20rpx;

			// 左侧：图标和状态
			.subject-icon-wrapper {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-shrink: 0;

				.subject-icon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 8rpx;

					&.orange {
						background: #FFE0B2;
					}

					&.blue {
						background: #E3F2FD;
					}

					.icon-text {
						font-size: 28rpx;
					}
				}

				.publish-status {
					padding: 4rpx 8rpx;
					border-radius: 8rpx;
					font-size: 18rpx;
					font-weight: bold;
					color: @white;
					text-align: center;

					&.unpublished {
						background: #FF9800;
					}

					&.published {
						background: #4CAF50;
					}
				}
			}

			// 右侧：科目信息
			.subject-info {
				flex: 1;

				// 头部：科目名称和按钮
				.subject-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16rpx;

					.subject-name {
						font-size: 28rpx;
						font-weight: bold;
						color: @text-color;
					}

					.publish-btn {
						border: none;
						border-radius: 20rpx;
						padding: 12rpx 24rpx;
						font-size: 24rpx;
						font-weight: bold;

						&.enabled {
							background: @primary-color;
							color: @white;
						}

						&.disabled {
							background: @white;
							color: @primary-color;
							border: 2rpx solid #e0e0e0;
						}

						&.republish {
							background: #FF9800;
							color: @white;
						}
					}
				}

				// 详细信息
				.subject-details {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;

					.subject-stats {
						display: flex;
						flex-direction: column;
						gap: 4rpx;

						.stat-text {
							font-size: 22rpx;
							color: @text-light;
						}
					}

					.subject-tasks {
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						gap: 8rpx;

						.task-text {
							font-size: 22rpx;
							color: @text-light;
						}

						.participation-toggle {
							display: flex;
							align-items: center;
							gap: 8rpx;

							.toggle-label {
								font-size: 20rpx;
								color: @text-light;
							}

							.toggle-switch {
								transform: scale(0.8);
							}
						}
					}
				}
			}
		}
	}
}

// 底部一键发布按钮
.bottom-action {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	background: linear-gradient(135deg, @primary-color 0%, @secondary-color 100%);

	.batch-publish-btn {
		width: 100%;
		background: @primary-color;
		color: @white;
		border: none;
		border-radius: 50rpx;
		padding: 24rpx;
		font-size: 30rpx;
		font-weight: bold;
		box-shadow: 0 6rpx 20rpx rgba(77, 208, 225, 0.4);
	}
}
</style>
